<template>
	<view>
		<view class="address-container">
			<view class="from">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to">
				<text>{{ to.address }}</text>
			</view>
		</view>
		<map
			id="map"
			:longitude="from.longitude"
			:latitude="from.latitude"
			:style="contentStyle"
			scale="12"
			:enable-traffic="false"
			:show-location="true"
			class="map"
			:polyline="polyline"
			:markers="markers"
		></map>

		<view class="panel">
			<view class="row">
				<view class="info">
					<view class="label">全程</view>
					<view class="value">
						<text>{{ distance }}</text>
						公里
					</view>
					<view class="label">，预计</view>
					<view class="value">
						<text>{{ duration }}</text>
						分钟
					</view>
				</view>
				<!--   <view class="opt" @tap="chooseCarHandle" v-if="!showCar">选择车辆</view>
        <view class="opt" @tap="chooseCarHandle" v-if="showCar">{{
          carPlate
        }}</view> -->
			</view>
			<button class="btn" v-if="isShowBt" @tap="createOrderByPerson">立即下单</button>

			<!-- 帮朋友下单 -->
			<view class="call_f">
				<view class="hellp" @tap="callForFriend">
					<text>帮朋友代叫</text>
					<u-icon name="arrow-right" color="#cccccc"></u-icon>
				</view>
			</view>
		</view>

		<u-popup v-model="showPopup" mode="center" width="600" height="350" :mask-close-able="false">
			<view class="popup-title">您的订单正在等待司机接单</view>
			<view class="count-down">
				<u-count-down
					ref="uCountDown"
					:timestamp="timestamp"
					:autoplay="false"
					separator="zh"
					:show-hours="false"
					:show-border="true"
					bg-color="#DDF0FF"
					separator-color="#0083F3"
					border-color="#0D90FF"
					color="#0D90FF"
					font-size="32"
					@end="countEndHandle"
					@change="countChangeHandle"
				></u-count-down>
			</view>
			<button class="btn" @tap="cancelHandle">取消订单</button>
		</u-popup>
	</view>
</template>

<script>
let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
let qqmapsdk;
let dayjs = require('dayjs');
export default {
	data() {
		return {
			isShowBt: true,
			from: {
				address: '',
				longitude: 0,
				latitude: 0
			},
			to: {
				address: '',
				longitude: 0,
				latitude: 0
			},
			contentStyle: '',
			windowHeight: 0,
			distance: 0,
			duration: 0,
			polyline: [],
			markers: [],
			infoStatus: true,
			carId: null,
			carPlate: null,
			carType: null,
			showCar: false,
			showPopup: false,
			timestamp: 60,
			orderId: null,
			//帮人代驾的电话号码和名称
			friendTel: '',
			friendName: ''
		};
	},
	methods: {
		formatPolyline(polyline) {
			let coors = polyline;
			let pl = [];
			//坐标解压（返回的点串坐标，通过前向差分进行压缩）
			const kr = 1000000;
			for (let i = 2; i < coors.length; i++) {
				coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
			}
			//将解压后的坐标放入点串数组pl中
			for (let i = 0; i < coors.length; i += 2) {
				pl.push({
					longitude: coors[i + 1],
					latitude: coors[i]
				});
			}
			return pl;
		},

		calculateLine(ref) {
			// console.log('执行这个方法了')
			qqmapsdk.direction({
				mode: 'driving',
				from: {
					latitude: ref.from.latitude,
					longitude: ref.from.longitude
				},
				to: {
					latitude: ref.to.latitude,
					longitude: ref.to.longitude
				},
				success(resp) {
					// console.log('计算的结果是:',resp)
					if (resp.status != 0) {
						uni.showToast({
							icon: 'error',
							title: resp.message
						});
						return;
					}
					let route = resp.result.routes[0];
					let distance = route.distance;
					let duration = route.duration;
					let polyline = route.polyline;
					ref.distance = Math.ceil((distance / 1000) * 10) / 10;
					ref.duration = duration;
					let points = ref.formatPolyline(polyline);

					ref.polyline = [
						{
							points: points,
							width: 6,
							color: '#05B473',
							arrowLine: true
						}
					];
					ref.markers = [
						{
							id: 1,
							latitude: ref.from.latitude,
							longitude: ref.from.longitude,
							width: 25,
							height: 35,
							anchor: {
								x: 0.5,
								y: 0.5
							},
							iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
						},
						{
							id: 2,
							latitude: ref.to.latitude,
							longitude: ref.to.longitude,
							width: 25,
							height: 35,
							anchor: {
								x: 0.5,
								y: 0.5
							},
							iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
						}
					];
				},
				
				fail(err){
					console.log(`错误结果是:`,err)
				}
			});
		},

		chooseCarHandle() {
			uni.navigateTo({
				url: '../car_list/car_list'
			});
		},

		//个人下单
		createOrderByPerson() {
			this.friendTel = '';
			this.friendName = '';
			this.createOrderHandle();
		},

		//创建订单的接口
		createOrderHandle() {
			let that = this;
			// if (that.carType == null || that.carPlate == null) {
			//   uni.showToast({
			//     icon: "error",
			//     title: "没有设置嘿代驾车辆",
			//   });
			//   return;
			// }
			
			uni.showLoading({
				title: '下单中请稍后'
			});
			
			// setTimeout(function() {
			// 	uni.hideLoading();
			// }, 60000);
			
			let data = {
				startPlace: that.from.address,
				startPlaceLatitude: that.from.latitude,
				startPlaceLongitude: that.from.longitude,
				endPlace: that.to.address,
				endPlaceLatitude: that.to.latitude,
				endPlaceLongitude: that.to.longitude,
				favourFee: '0.0',
				// carPlate: that.carPlate,
				// carType: that.carType,
				date: dayjs().format('YYYY-MM-DD HH:mm:ss')
			};

			//如果是帮忙
			if (that.friendTel && that.friendTel != '') {
				data.friendTel = that.friendTel;
			}

			if (that.friendName && that.friendName != '') {
				data.friendName = that.friendName;
			}

			// console.log(`请求参数是:`,data)
			that.ajax(that.url.createNewOrder, 'POST', data, function(resp) {
				uni.hideLoading();
				if (resp.data.result.count > 0) {
					uni.showToast({
						icon: 'success',
						title: '订单创建成功'
					});
					setTimeout(()=> {
						that.orderId = resp.data.result.orderId;
						
						// console.log('创建的订单ID是:',that.orderId)
						
						that.showPopup = true;
						//此处应该是15*60，但是测试中我们等不了15分钟
						that.timestamp = 15*60;
						// that.timestamp = 60;
						that.$refs.uCountDown.start();
					}, 1000);
				} else {
					uni.showToast({
						icon: 'none',
						title: '没有适合接单的司机'
					});
				}
			},'下单中请稍后');
		},

		searchOrderStatus(ref) {
			let data = {
				orderId: ref.orderId
			};
			// console.log(`定时器查询的订单ID是${ref.orderId}`)
			ref.ajax(
				ref.url.searchOrderStatus,
				'POST',
				data,
				(resp)=> {
					 // console.log(`司机接单状态是:`,resp.data.result)
					if (resp.data.result == 2) {
						ref.showPopup = false;
						ref.timestamp = null;
						uni.showToast({
							icon: 'success',
							title: '司机已接单'
						});
						uni.vibrateShort({});
						uni.redirectTo({
							url: '../move/move?orderId=' + ref.orderId
						});
					} else if (resp.data.result == 0) {
						ref.showPopup = false;
						ref.timestamp = null;
						uni.showToast({
							icon: 'success',
							title: '订单已经关闭'
						});
					}
				},
				false
			);
		},

		//取消未接单的订单
		deleteUnAcceptOrder: function(ref) {
			
			ref.showPopup = false;
			ref.timestamp = null;
			let data = {
				orderId: ref.orderId
			};
			
			ref.ajax(ref.url.deleteUnAcceptOrder, 'POST', data, function(resp) {
				let result = resp.data.result;
				// console.log(result);
				if (result == '订单取消成功') {
					uni.showToast({
						icon: 'success',
						title: '订单取消成功'
					});
					setTimeout(function() {
						uni.redirectTo({
							url: '../workbench/workbench'
						});
					}, 3000);
				} else {
					ref.searchOrderStatus(ref);
				}
			});
		},

		countChangeHandle(s) {
			let that = this;
			// console.log(`计时器时间是:${s}`)
			if (s != 0 && s % 5 == 0) {
				that.searchOrderStatus(that);
			}
		},

		countEndHandle() {
			let that = this;
			that.deleteUnAcceptOrder(that);
		},

		cancelHandle() {
			let that = this;
			that.deleteUnAcceptOrder(that);
		},

		//帮朋友下单
		callForFriend() {
			uni.navigateTo({
				url: '../call_friend/call_friend'
			});
		}
	},

	onLoad(options) {
		let that = this;
		//设置地图控件的高度适配屏幕高度
		let windowHeight = uni.getSystemInfoSync().windowHeight;
		that.windowHeight = windowHeight;
		that.contentStyle = `height:${that.windowHeight}px;`;

		that.from = uni.getStorageSync('from');
		that.to = uni.getStorageSync('to');
		qqmapsdk = new QQMapWX({
			key: that.tencent.map.key
		});

		that.map = uni.createMapContext('map');

		if (options.hasOwnProperty('showCar')) {
			that.showCar = options.showCar;
			that.carId = options.carId;
			that.carPlate = options.carPlate;
			that.carType = options.carType;
		}

		if (options.hasOwnProperty('showPopup')) {
			that.timestamp = 60;
			that.showPopup = true;
			that.orderId = options.orderId;
			that.$refs.uCountDown.start();
		}

		//注册监听事件
		uni.$on('create_order', ({ friendTel, friendName }) => {
			// console.log('接受到消息了',friendTel,friendName)
			this.friendName = friendName;
			this.friendTel = friendTel;

			// //隐藏创建订单按钮
			// this.isShowBt = false;
			setTimeout(() => {
				//执行下单
				uni.showLoading({
					title: '下单中请稍后'
				});
				this.createOrderHandle();
			}, 1000);
		});
	},

	onShow() {
		// console.log(`执行onShow方法了`)
		let that = this;
		that.calculateLine(that);
	}
};
</script>

<style lang="less">
@import url('create_order.less');
</style>
